<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>20.正则的转义字符的运用</title>
        <script>
            /**
             * 转义字符：
             * \b 在正则里表示独立的部分(起始、结束、空格)
             * \B. 在正则里表示非独立的部分(除了起始、结束、空格)
             */
            // 封装一个通过class来获取元素的函数，简易版(小bug版)
            // function getByClass (oParent, sClass) {
            //     var arr = [];
            //     var aEle = oParent.getElementsByTagName("*");
            //     for ( var i = 0, len = aEle.length; i < len; i++ ) {
            //         if ( aEle[i].className == sClass ) {
            //             arr.push(aEle[i]);
            //         }
            //     }
            //     return arr;
            // }

            // 用正则的方式来修复下这个小bug，挺好！
            function getByClass (oParent, sClass) {
                var arr = [];
                var aEle = oParent.getElementsByTagName("*");
                // var re = //;
                // 当正则需要传参的时候，一定要用全称的写法
                var re = new RegExp('\\b' + sClass + '\\b');
                for ( var i = 0, len = aEle.length; i < len; i++ ) {
                    if ( re.test(aEle[i].className) ) {
                        arr.push(aEle[i]);
                    }
                }
                return arr;
            }

            window.onload = function () {
                var oUl = document.getElementsByTagName("ul")[0];
                var aLi = getByClass (oUl, "box1");
                for ( var i = 0, len = aLi.length; i < len; i++ ) {
                    aLi[i].style.backgroundColor = '#f00';
                }
            };
        </script>
    </head>
    <body>
        <ul>
            <li class="box1"></li>
            <li></li>
            <li class="box1box2"></li>
            <li></li>
            <li class="box1 box2 box3"></li>
        </ul>
    </body>
</html>
